<template>
	<el-container>
		<el-divider>
			<span>水印内容</span>
		</el-divider>
		<div class="drawer_class">
			<el-radio-group v-model="wmRadio">
				<el-radio-button label="text">文字</el-radio-button>
				<el-radio-button label="img">图片</el-radio-button>
			</el-radio-group>
		</div>
		<div class="drawer_class">
			<el-input @input="wmcChange" v-model="textarea" :rows="2" type="textarea" placeholder="水印文字,多个用;或换行分割"
				v-if="wmRadio=='text'">
				<template #prepend>文字</template>
			</el-input>
			<el-input @change="wmcChange" v-model="drawerWatermarkConfig.image" placeholder="水印文字,多个用;分割" v-if="wmRadio=='img'">
				<template #prepend>图片地址</template>
			</el-input>
		</div>
		<div class="drawer_class">
			<el-row :gutter="25" class="drawer_class">
				<el-col :span="12">
					<span>字体大小</span>
					<el-slider @change="wmcChange" :max="100" :min="14" :step="1" v-model="drawerWatermarkConfig.fontSize" />
				</el-col>
				<el-col :span="12">
					<span>字体粗细</span>
					<el-slider @change="wmcChange" :max="1800" :min="100" :step="10" v-model="drawerWatermarkConfig.fontWeight" />
				</el-col>
			</el-row>
			<el-row :gutter="5" class="drawer_class">
				<el-col :span="12">
					<el-row>
						<el-col :span="8" style="margin-top: 3px;"><span>对齐方式</span></el-col>
						<el-col :span="16">
							<el-select @change="wmcChange" v-model="drawerWatermarkConfig.textAlign" placeholder="Select">
								<el-option label="center" value="center" />
								<el-option label="left" value="left" />
								<el-option label="right" value="right" />
								<el-option label="start" value="start" />
								<el-option label="end" value="end" />
							</el-select>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="12">
					<el-row>
						<el-col :span="8" style="margin-top: 3px;"><span>字体样式</span></el-col>
						<el-col :span="16">
							<el-select @change="wmcChange" v-model="drawerWatermarkConfig.fontStyle" placeholder="Select">
								<el-option label="正常" value="normal" />
								<el-option label="斜体" value="italics" />
							</el-select>
						</el-col>
					</el-row>
				</el-col>
				</el-row>
				<el-row :gutter="5" class="drawer_class">
				<el-col :span="16">
					<el-input v-model="drawerWatermarkConfig.fontFamily" placeholder="字体" @change="wmcChange">
						<template #prepend>字体</template>
					</el-input>
				</el-col>
				<el-col :span="8">
					<el-input v-model="drawerWatermarkConfig.fontColor" type="color" @change="wmcChange">
						<template #prepend>颜色</template>
					</el-input>
				</el-col>
			</el-row>
			<el-row :gutter="5" class="drawer_class">
				<el-col :span="24">
					<el-input @change="wmcChange" v-model="drawerWatermarkConfig.blindText" type="text" placeholder="盲水印文案">
						<template #prepend>盲水印</template>
					</el-input>
				</el-col>
				</el-row>
				<el-row :gutter="5" class="drawer_class">
				<el-col :span="24">
					<span>盲水印透明度</span>
					<el-slider @change="wmcChange" :max="0.02" :min="0.001" :step="0.001" v-model="drawerWatermarkConfig.blindOpacity" />
				</el-col>
			</el-row>
		</div>
		<el-divider>
			<span>水印样式</span>
		</el-divider>
		<div class="drawer_class">
			<div>
				<span>透明度</span>
			    <el-slider @change="wmcChange" :max="1" :min="0" :step="0.01" v-model="drawerWatermarkConfig.opacity" />
			  </div>
			  <el-row :gutter="5" class="drawer_class">
			  	<el-col :span="12">
					<span>水印宽度</span>
					<el-slider @change="wmcChange" :max="150" :min="40" :step="5" v-model="drawerWatermarkConfig.width" />
			  	</el-col>
			  	<el-col :span="12">
					<span>水印高度</span>
					<el-slider @change="wmcChange" :max="100" :min="10" :step="5" v-model="drawerWatermarkConfig.height" />
			  	</el-col>
			  </el-row>
			  <el-row :gutter="5" class="drawer_class">
			  	<el-col :span="12">
					<span>水平偏移量</span>
					<el-slider @change="wmcChange" :max="10" :min="0" :step="1" v-model="drawerWatermarkConfig.offsetLeft" />
			  	</el-col>
			  	<el-col :span="12">
					<span>垂直偏移量</span>
					<el-slider @change="wmcChange" :max="10" :min="0" :step="1" v-model="drawerWatermarkConfig.offsetTop" />
			  	</el-col>
			  </el-row>
			  <el-row :gutter="5" class="drawer_class">
			  	<el-col :span="12">
					<span>水印水平间距</span>
					<el-slider @change="wmcChange" :max="1000" :min="50" :step="50" v-model="drawerWatermarkConfig.gapX" />
			  	</el-col>
			  	<el-col :span="12">
					<span>水印垂直间距</span>
					<el-slider @change="wmcChange" :max="1000" :min="50" :step="50" v-model="drawerWatermarkConfig.gapY" />
			  	</el-col>
			  </el-row>
			  <el-row :gutter="5" class="drawer_class">
			  	<el-col :span="12">
					<span>堆叠顺序</span>
					<el-slider @change="wmcChange" :max="1000" :min="80" :step="2" v-model="drawerWatermarkConfig.zIndex" />
			  	</el-col>
			  	<el-col :span="12">
					<span>旋转角度</span>
					<el-slider @change="wmcChange" :max="180" :min="-180" :step="2" v-model="drawerWatermarkConfig.rotate" />
			  	</el-col>
			  </el-row>
		</div>
		<el-divider>
			<span>高级设置</span>
		</el-divider>
		<div class="drawer_class">
			<el-row :gutter="5" class="drawer_class">
				<el-col :span="12">
					<span>渲染模式</span>
					<el-radio-group @change="wmcChange" v-model="drawerWatermarkConfig.mode">
						<el-radio label="interval">错行展示</el-radio>
						<el-radio label="repeat">重复展示</el-radio>
					</el-radio-group>
				</el-col>
				<el-col :span="12">
					<span>开启保护模式</span>
					<el-switch @change="wmcChange" class="header-child_2" v-model="drawerWatermarkConfig.monitor"
						style="margin-left: 2px" inline-prompt :active-icon="Check" :inactive-icon="Close" />
				</el-col>
			</el-row>
		</div>
	</el-container>
</template>

<script lang="ts" setup>
import { config } from 'process';
import { ref ,defineProps} from 'vue'

interface drawerWatermarkConfig{
	gapX: number,//水印之间的水平间距
	gapY: number,//水印之间的垂直间距
	offsetLeft: number,//水印在 canvas 画布上绘制的水平偏移量
	offsetTop: number,//水印在 canvas 画布上绘制的垂直偏移量
	width: number,//单个水印宽度
	height: number,//单个水印高度
	opacity: number,//水印透明度
	rotate: number,//旋转的角度
	fontSize: number,//	设置字体大小
	fontStyle: string,//规定字体样式
	fontVariant: string,//规定字体变体
	fontWeight: number,//设置字体粗细
	fontColor: string,//设置字体颜色
	fontFamily: string,
	textAlign: string,
	textBaseline: string,
	monitor: boolean,//是否开启保护模式
	zIndex: number,
	mode: string,
	pack: boolean,//是否使用水印组件包裹内容
	blindFontSize: number,
	blindOpacity: number,
	text: Array,
	blindText: string,
	container: string,
	image: string,//图片源
}
const props=defineProps({
	watermarkStyle:{
		type: Object as () => drawerWatermarkConfig,
		required: true
	}
})
const {
	gapX,//水印之间的水平间距
	gapY,//水印之间的垂直间距
	offsetLeft,//水印在 canvas 画布上绘制的水平偏移量
	offsetTop,//水印在 canvas 画布上绘制的垂直偏移量
	width,//单个水印宽度
	height,//单个水印高度
	opacity,//水印透明度
	rotate,//旋转的角度
	fontSize,//	设置字体大小
	fontStyle,//规定字体样式
	fontVariant,//规定字体变体
	fontWeight,//设置字体粗细
	fontColor,//设置字体颜色
	fontFamily,
	textAlign,
	textBaseline,
	monitor,//是否开启保护模式
	zIndex,
	mode,
	pack,//是否使用水印组件包裹内容
	blindFontSize,
	blindOpacity,
	text,
	blindText,
	container,
	image,//图片源
} =props.watermarkStyle;
//抽屉水印类型

	// const props=defineProps([
	// 	'drawerWatermarkConfig'
	// ])
	// const drawerWatermarkConfig=ref()
	// onMounted(() => {
	// 	drawerWatermarkConfig=config
	// })
	// const drawerWatermarkConfig=reactive(config)
	
	// //水印配置变化
	// const wmcChange=()=>{
	// 	if(textarea.value){
	// 		let arr=textarea.value.split(/[\n+；;]/g)
	// 		drawerWatermarkConfig.value.text=arr
	// 	}
	// 	console.log(drawerWatermarkConfig)
	// }
</script>

<style>
</style>